<template>
  <div class="home_container">
   <Row>
     <Col span="12">
      <Card>
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h2>品牌销售总览</h2>
            </Col>
            <Col span="6">
              <Select v-model="model1" style="width:150px" size="small"  clearable>
                <Option v-for="item in storeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6">
              <Select v-model="model2" style="width:150px" size="small"  clearable>
                <Option v-for="item in daterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6">
              <Select v-model="model3" style="width:150px" size="small"  clearable>
                <Option v-for="item in grouptype" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div id="BrandSales" style="width:40vw;height:40vh;margin-left:-1vw;"></div>
             </Col>
           </Row>
        </div>
      </Card>
     </Col>
     <Col span="12">
      <Card style="margin-left:1vw;">
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h2>客户复购率</h2>
            </Col>
            <Col span="6">
              <Select v-model="model4" style="width:150px" size="small"  clearable>
                <Option v-for="item in customerstoreList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div id="customerepurchase" style="width:40vw;height:40vh;margin-left:-1vw;"></div>
             </Col>
           </Row>
        </div>
      </Card>
     </Col>
   </Row>
   <Row>
    <Col span="12">
      <Card style="margin-top:2vh;">
        <div class="marketingkpi_container" >
           <Row>
            <Col span="5">
              <h2>营销效果KPI</h2>
            </Col>
            <Col span="6" push="1">
              <Select v-model="model5" style="width:150px" size="small" clearable>
                <Option v-for="item in markstoreList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6" push="1">
              <Select v-model="model6" style="width:150px" size="small" clearable>
                <Option v-for="item in markdaterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6" push="1">
              <Select v-model="model7" style="width:150px" size="small" clearable>
                <Option v-for="item in markgrouptype" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div class="marketingkpi" style="width:40vw;height:40vh;margin-left:-1vw;">
                <ul style="padding-left:2vw;">
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">营销用户数</p>
                    <div><span :style="marketingkpinum">99,999</span><span>人</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">响应客户数</p>
                    <div><span :style="marketingkpinum">99,999</span><span>人</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">成功营销金额</p>
                    <div><span :style="marketingkpinum">￥99,999</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">响应率</p>
                    <div><span :style="marketingkpinum">50.02%</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">ROI</p>
                    <div><span :style="marketingkpinum">1:2.35</span></div>
                  </li>
                  <div style="clear:both;"></div>
                </ul>
              </div>
             </Col>
           </Row>
        </div>
      </Card>
    </Col>
    <Col span="12">
      <Card style="margin-left:1vw;margin-top:2vh;">
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h2>TOP5营销活动</h2>
            </Col>
            <Col span="6">
              <Select v-model="model8" style="width:150px" size="small"  clearable>
                <Option v-for="item in topdaterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6" push="1">
              <Select v-model="model9" style="width:150px" size="small"  clearable>
                <Option v-for="item in topgrouptype" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div id="customerepurchase" style="width:40vw;height:50vh;margin-left:-1vw;">
                <Table border :columns="columns1" :data="data1"></Table>
              </div>
             </Col>
           </Row>
        </div>
      </Card>
    </Col>
   </Row>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: 'index',
  data () {
    return {
      model1: '',
      model2: '',
      model3: '',
      model4:'',
      model5:'',
      model6:'',
      model7:'',
      model8:'',
      model9:'',
      // 品牌销售总览 option
      storeList:[
        {
          value: 'nvymenstore',
          label: '【天猫】妮维雅男店'
        },
        {
          value: 'nvywomenstore',
          label: '【天猫】妮维雅女店'
        },
        {
          value: 'nvyunderline',
          label: '【线下】妮维雅线下渠道'
        },
        {
          value: 'nvychannel',
          label: '【全渠道】妮维雅全渠道'
        }
      ],
      daterange:[
        {
          value: 'sevendays',
          label: '近7日'
        },
        {
          value: 'fifteendays',
          label: '近15日'
        },
        {
          value: 'thirtydays',
          label: '近30日'
        }
      ],
      grouptype:[
        {
          value: 'consumer',
          label: '消费者'
        },
        {
          value: 'member',
          label: '会员'
        }
      ],
      // 客户复购率 option
      customerstoreList:[
        {
          value: 'cusnvymenstore',
          label: '【天猫】妮维雅男店'
        },
        {
          value: 'cusnvywomenstore',
          label: '【天猫】妮维雅女店'
        },
        {
          value: 'cusnvyunderline',
          label: '【线下】妮维雅线下渠道'
        },
        {
          value: 'cusnvychannel',
          label: '【全渠道】妮维雅全渠道'
        }
      ],
      // 营销效果KPI option
      markstoreList:[
        {
          value: 'marknvymenstore',
          label: '【天猫】妮维雅男店'
        },
        {
          value: 'marknvywomenstore',
          label: '【天猫】妮维雅女店'
        },
        {
          value: 'marknvyunderline',
          label: '【线下】妮维雅线下渠道'
        },
        {
          value: 'marknvychannel',
          label: '【全渠道】妮维雅全渠道'
        }
      ],
      markdaterange:[
        {
          value: 'marksevendays',
          label: '近7日'
        },
        {
          value: 'markfifteendays',
          label: '近15日'
        },
        {
          value: 'markthirtydays',
          label: '近30日'
        }
      ],
      markgrouptype:[
        {
          value: 'markconsumer',
          label: '消费者'
        },
        {
          value: 'markmember',
          label: '会员'
        }
      ],
      // 营销效果
      marketinglist:[ ],
      // Top5营销活动
      topdaterange:[
        {
          value: 'topsevendays',
          label: '近7日'
        },
        {
          value: 'topfifteendays',
          label: '近15日'
        },
        {
          value: 'topthirtydays',
          label: '近30日'
        }
      ],
      topgrouptype:[
        {
          value: 'topconsumer',
          label: '消费者'
        },
        {
          value: 'topmember',
          label: '会员'
        }
      ],
      //top表格
      columns1: [
          {
              title: '活动ID',
              key: 'activityid',
              width: 80,
          },
          {
              title: '活动名称',
              key: 'activityname',
              width: 80,
          },
          {
              title: '营销客人数',
              key: 'marketingnum',
              width: 80,
          },
          {
              title: '营销成功人次',
              key: 'successfulmarketing',
              width: 90,
          },
          {
              title: '成功率',
              key: 'successrate',
              width: 70,
          },
          {
              title: '营销成本',
              key: 'marketingcost',
              width: 70,
          },
          {
              title: '营销收益',
              key: 'marketingincome',
              width: 70,
          },
          {
              title: 'ROI',
              key: 'roi',
              width: 70,
          }
      ],
      data1: [
          {
              activityid: 110,
              activityname: 18,
              marketingnum: 56165,
              successfulmarketing: '2016-10-03',
              successrate:'80%',
              marketingcost:'80%',
              marketingincome:'80%',
              roi:'80%',
          },
          {
              activityid: 110,
              activityname: 18,
              marketingnum: 56165,
              successfulmarketing: '2016-10-03',
              successrate:'80%',
              marketingcost:'80%',
              marketingincome:'80%',
              roi:'80%',
          },
          {
              activityid: 110,
              activityname: 18,
              marketingnum: 56165,
              successfulmarketing: '2016-10-03',
              successrate:'80%',
              marketingcost:'80%',
              marketingincome:'80%',
              roi:'80%',
          },
      ]
    }
  },
  computed: {
    martketinglistyle() {
      return {
        dispaly:'inline-block',
        width:'10vw',
        height:'20vh',
        float:'left',
        margin:'1vw',
      }
    },
    marketingkpititle() {
      return {
        height:'15vh',
        fontSize: '1rem',
        lineHeight:'15vh',
      }
    },
    marketingkpinum() {
      return {
        height:'5vh',
        lineHeight:'5vh',
        fontSize: '2rem',
      }
    },
    unitstyle() {
      return {
        fontSize:'14px',
        marginLeft:'5px',
      }
    }
  },
  methods: {
    // 折线图
    drawBrandSales() {             // 品牌销售总览
      echarts.dispose(document.getElementById("BrandSales"));
      this.BrandSales = echarts.init(document.getElementById("BrandSales"));
      this.BrandSales.setOption({
         animationDelay:function(idx){
            return idx * 100;
        },
        color:['#4dadff','#81df95','#96aeff','#fedf78',],
        grid:{
          top:40,
          left:'6%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              },
          },
          formatter: '{b}'+'</br>'+'{a0}:{c0}'+'K'+'</br>'+'{a1}:{c1}'+'K'+'</br>'+'{a2}:{c2}'+'K'+'</br>'+'{a3}:{c3}'+'K',
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right:20,
          top: 20,
          bottom: 20,
          data:['销售额','购买人数','客单价','货单价']
        },
        axisPointer:{
         
        },
        xAxis: [
            {
                type: 'category',
                data: ['2018/1/1','2018/1/2','2018/1/3','2018/1/4','2018/1/5','2018/1/6'],
                axisPointer: {
                    type: 'shadow'
                },
                
                axisTick:{
                  show:false,
                },
                axisLabel:{
                  rotate:30,
                  color:'#cbcbcb'
                },
                boundaryGap:['1%','1%'],
            }
        ],
        yAxis: [
          {
              type: 'value',
              min: 0,
              interval: 3,
              axisLabel: {
                  formatter: '{value} K',
                  color:'#cbcbcb'
              },
              axisLine:{
                show:false,
              },
              axisTick:{
                show:false,
              },
              splitLine:{
                  show:false
              }
          },
        ],
        series: [
            {
                name:'销售额',
                type:'bar',
                data:[2.0, 4.9,17,7.0, 3.2, 5.6, ],
                barWidth:'15%'
            },
            {
                name:'购买人数',
                type:'bar',
                data:[2.6, 5.9,17,9.0, 2.4, 6.7, ],
                barWidth:'15%'
            },
            {
                name:'客单价',
                type:'line',
                smooth: true,
                data:[2.6, 5.9, 9.0, 6.4, 8.7, 7.7],
            },
            {
                name:'货单价',
                type:'line',
                smooth: true,
                data:[2.3, 3.4, 6.0, 8.5, 12.0, 6.2],
            },
        ]
      });
    },
    drowcustomerepurchase() {           // 客户复购率
      echarts.dispose(document.getElementById("customerepurchase"));
      this.customerepurchase = echarts.init(document.getElementById("customerepurchase"));
      this.customerepurchase.setOption({
         animationDelay:function(idx){
            return idx * 100;
        },
        color:['#4dadff','#fed040'],
        grid:{
          top:40,
          left:'10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              },
          },
          formatter: '{b}'+'</br>'+'{a0}:{c0}' + 'K'+'</br>'+'{a1}:{c1}'+'%'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right:20,
          top: 20,
          bottom: 20,
          data:['复购人数','复购率']
        },
        axisPointer:{
         
        },
        xAxis: [
            {
                type: 'category',
                data: ['2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09','2017-10','2017-11','2017-12'],
                axisPointer: {
                    type: 'shadow'
                },
                
                axisTick:{
                  show:false,
                },
                axisLabel:{
                  rotate:30,
                  color:'#cbcbcb'
                },
                boundaryGap:['1%','1%'],
            }
        ],
        yAxis: [
          {
              type: 'value',
              min: 0,
              interval: 100,
              axisLabel: {
                  formatter: '{value} K',
                  color:'#cbcbcb'
              },
              axisLine:{
                show:false,
              },
              axisTick:{
                show:false,
              },
              splitLine:{
                  show:false
              }
          },
        ],
        series: [
            {
                name:'复购人数',
                type:'bar',
                data:[90, 100,180,200,230,350,290,290,310,200,710,200 ],
                barWidth:'30%'
            },
            {
                name:'复购率',
                type:'line',
                smooth: true,
                data:[60, 90,180,200,210,350,240,290,310,200,710,200],
            },
        ]
      });
    },
    drawCharts(){
      this.drawBrandSales();
      this.drowcustomerepurchase();
    },
  },
  mounted () {
      this.drawCharts();
  }
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.home_container{
  @include container_global;
  background: #F3F7FF;
  .brand_sales_overview{

  }
  .marketingkpi{
    margin-top: 2vh;
  }
}
</style>